<html>
<head>
    <title></title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">标杆设置</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree ref="devTree" v-on:click-node="onTreeNode"  :tabsign="'p'"></dev-tree>
            </el-col>
            <el-col :span="20">

                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="能耗类型">
                                <el-select @change="HandleSelectChange" v-model="energyType"  filterable  style="width:140px">
                                <el-option label="电" value="Electric"></el-option>
                                <el-option label="水" value="Water"></el-option>
                                <el-option label="蒸汽" value="Steam"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="float: right">
                            <el-tooltip effect="dark" content="请点击左边树中项目" v-model="tooltip" placement="right">

                            <el-button type="success" @click="setBtn" >设为标杆</el-button>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table   border stripe style="width: 100%" :data="tabData"   highlight-current-row  @current-change="handleCurrentChange">
                    <el-table-column prop="zoneName" label="区域名称" align="center">
                    </el-table-column>
                    <el-table-column prop="flag" label="是否为标杆"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.flag == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.flag == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>


                </el-table>

            </el-col>
        </el-row>
    </div>


</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
            tabData:[{
                name:'11',value:0
            }],
            currentRow:'',
            energyType:'Electric',
            proNo:'',
            tooltip:false,
            zoneType:0, // 区域
        },
        methods:{
            onTreeNode(data){
                this.proNo = '';
                if (data.id.split('_')[0] =='P'){
                    this.proNo = data.attributes.projectNo;
                    this.getZone();
                }
            },
            setBtn(){
                  if (this.currentRow!=''){
                      HttpUtil.get('BenchMark/Add',{projectNo:this.proNo,zone_id:this.currentRow.zoneID, benchmark_type:this.energyType,zoneType:this.zoneType}).success((res)=>{
                          this.getZone()
                      });
                  } else {
                      this.$message.error('请选中行')
                  }

            },
            HandleSelectChange(){
                 if (this.proNo!=''){
                     this.getZone();
                 }
            },
            handleCurrentChange(val){
                this.currentRow = val;
            },
            getZone(){
                this.currentRow = '';
                HttpUtil.get('BenchMark/List',{projectNo:this.proNo,zoneType:this.zoneType,energyType:this.energyType}).success((res)=>{
                              this.tabData = res.data;
                })
            }
        },
        created:function(){
        },
        mounted:function(){
            this.tooltip = true;
        }
    });


</script>

</body>
</html>
